import SelectMoreComps from "./SelectMoreComps.js";
import ButtonComs from "./ButtonComs";
import Icon from "@ui/RJMart/icons";

export default class Category extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            lists: [

            ],
            multiply: false,
            open: false,
            selcted_one: -1
        };

        this.chooed_categoryIds = [];
        this.choosed_categorys=[]
    }

    selectMulti(type, item) {
        if (type == "push") {
            this.choosed_categorys.push(item.name)
            this.chooed_categoryIds.push(item.id);
        } else if (type == "splice") {
            let list= this.choosed_categorys.filter((category)=>{
                return  category!=item.name
            })
            let listIds = this.chooed_categoryIds.filter(id => {
                return id != item.id;
            });
            this.choosed_categorys=list
            this.chooed_categoryIds = listIds;
        }
    }

    setCategorys(){
        const {setCategory}=this.props
        let categoryStr=this.choosed_categorys.join(',')
        let categoryIds=this.chooed_categoryIds

        setCategory(categoryStr,categoryIds)

    }

    clearCategorys(){
        this.choosed_categorys=[]
        this.chooed_categoryIds=[]
    }

    render() {
        const { lists, multiply, open } = this.state;
        const { categoryIds,setCategory } = this.props;

        return (
            <div
                className={
                    (multiply||open)
                        ? "search-page-select-category1"
                        : "search-page-select-category"
                }
            >
                <div className={"search-page-select-brand-2"}>
                    <p>分类</p>
                </div>
                <div className={"search-page-select-brand-wrapper"}>
                    <div
                        className={
                            (multiply||open)
                                ? "search-page-select-category-list1"
                                : "search-page-select-category-list"
                        }
                    >
                        {categoryIds &&
                        categoryIds.map((item, index) => {
                                return (
                                    <TextItem
                                        multiply={multiply}
                                        open={open}
                                        key={index}
                                        index={index}
                                        item={item}
                                        selectMulti={type =>
                                            this.selectMulti(type, item)
                                        }
                                        selectOne={()=>{
                                            setCategory(item.name,[item.id])
                                        }}
                                    />
                                );
                            })}
                    </div>
                    {(multiply||open) && <div style={{ height: 15 }} />}
                    {multiply && (
                        <ButtonComs
                            isSupp={true}
                            onConfirm={() => {
                                this.setState({
                                    multiply: false
                                });
                               this.setCategorys()
                            }}
                            onCancle={() => {
                                this.setState({
                                    multiply: false
                                });
                                this.clearCategorys()
                            }}
                        />
                    )}
                </div>
                {
                    categoryIds&&categoryIds.length>1&& (
                        <SelectMoreComps
                            minWidth={true}
                            open={open}
                            multiply={multiply}
                            lists={categoryIds}
                            setOpen={open => {
                                this.setState({
                                    open
                                });
                            }}
                            setMultiply={multiply => {
                                this.setState({
                                    multiply,
                                });
                            }}
                        />
                    )
                }

            </div>
        );
    }


    


}

class TextItem extends React.Component {
    constructor() {
        super();
        this.state = {
            selected: false
        };
    }

    componentWillReceiveProps(nextProps) {
        if (
            nextProps.multiply != this.props.multiply ||
            nextProps.item != this.props.item
        ) {
            this.setState({
                selected: false
            });
        }
    }

    render() {
        const { item, multiply, open, selectMulti,selectOne } = this.props;

        const isOpen = multiply || open;
        const { selected } = this.state;
        // console.log(isOpen);
        return (
            <div
                className={
                    isOpen
                        ? "search-page-select-category-item1"
                        : "search-page-select-category-item"
                }
                onClick={() => {
                    if (multiply) {
                        if (selected) {
                            selectMulti("splice");
                        } else {
                            selectMulti("push");
                        }
                        this.setState({
                            selected: !selected
                        });
                        return;
                    }
                    selectOne()
                }}
            >
                {multiply &&
                    (selected ? (
                        <div className={"search-page-select-item-gouxuan1"}>
                            <Icon
                                type={"check"}
                                color={"#0093EB"}
                                size={"small"}
                                width={16}
                                height={16}
                                style={{ marginTop: -8,marginLeft:-1 }}
                            />
                        </div>
                    ) : (
                        <div className={"search-page-select-item-gouxuan"} />
                    ))}
                <p
                    className={
                        selected
                            ? "search-page-select-category-item-p1"
                            : "search-page-select-category-item-p"
                    }
                >
                    {item.name}
                </p>
            </div>
        );
    }
}
